<template lang="pug">
el-dialog(title="订单详情" :visible.sync="orddetial" :before-close="close" append-to-body)
    el-steps(:active="active" finish-status="success")
        el-step(title="待付款")
        el-step(title="拼团中")
        el-step(title="待发货")
        el-step(title="待收货")
        el-step(title="已完成")
        el-step(title="已取消")
        el-step(title="未成团")
        el-step(title="退款成功")
        el-step(title="退款审核中")
        el-step(title="退款失败")
    el-card
        el-row
            h3 订单概况
            el-col(:span="12") 订单编号:&nbsp;{{z.orderCode}}
            el-col(:span="12") 订单状态:&nbsp;{{z.orderStatus | changeorderstate}}
            el-col(:span="12") 确认收货类型:&nbsp;{{z.receivedRecord | receivedRecordtype}}
            el-col(:span="12") 确认收货时间:&nbsp;{{z.recordTime | format}}
        el-row
            h3 小计
            el-col(:span="12") 金额:&nbsp;{{z.orderOldPrice}}
            el-col(:span="12") 实付:&nbsp;{{z.orderPrice}}
            el-col(:span="12") 优惠金额:&nbsp;{{z.couponPrice}}
        el-row
            h3 支付方式
            el-col(:span="24") 支付方式:&nbsp;{{z.payType | paytype}}
        el-row
            h3 物流信息
            el-col(:span="12") 收货人:&nbsp;{{z.contactPersion}}
            el-col(:span="12") 联系电话:&nbsp;{{z.contactMobile}}
            el-col(:span="24") 配送地址:&nbsp;{{z.deliveryAddress}}
        el-table(:data="td" style="width: 100%" height="150")
            el-table-column(prop="goodsName" label="商品名称")
            el-table-column(prop="goodsPrice" label="单价")
                template(slot-scope="scope")
                    span {{scope.row.minPrice}}/{{scope.row.minCount}}{{scope.row.goodsSpec}}
            el-table-column(prop="goodsNum" label="购买规格")
            el-table-column(label="总金额")
                template(slot-scope="scope")
                    span {{scope.row.goodsPrice}}
    .dialog-footer(slot="footer")
        el-button(@click="close") 关闭
</template>
<script>
import moment from 'moment'
import{ changeorderstate,paytype,receivedRecordtype }from '../../filters/commonfilter/index'
    export default{
        data(){
            return{
                active: 0,
                orddetial:false,
                z:{},
                td:[]
            }
        },
        computed:{
            getstate(){
                return this.$store.state.orderdetialclass;
            },
            getchange(){
                return this.$store.state.orderdetial;
            }
        },
        filters:{
            changeorderstate,
            paytype,
            receivedRecordtype,
            format(v){//对时间戳进行转换
                if(v){
                    return moment(v).format("YYYY-MM-DD HH:mm:ss")
                }else{
                    return
                }
            }
        },
        watch:{
            getstate(val){//获取弹窗打开
                this.orddetial=val
            },
            getchange(val){//获取父组件的数据
                this.z={}
                if(val!=undefined){
                    this.z=val
                    this.active=val.orderStatus
                    this.td=[].concat(val.xcxOrderGoodsList)
                }
            }
        },
        methods:{
            close(){//关闭
                this.$store.state.orderdetialclass=false
            }
        }
    }
</script>
<style>
.el-dialog__header {
    padding: 10px;
    background-color: #20a0ff !important;
}
.el-dialog__title{
    color: #fff !important;
}
.tabless{
    width: 20%;
    height: 40px;
    text-align: center;
    display: table-cell;
    line-height: 40px;
    border: 1px solid #ccc;
}
</style>